import React, { Component } from 'react'
import {
  Form,
  Button,
  Card,
  Breadcrumb,
  DatePicker,
  Radio,
  Table,
  Image,
  Tag,
  Modal,
} from 'antd'
import {
  EditOutlined,
  DeleteOutlined,
  ExclamationCircleOutlined,
} from '@ant-design/icons'
import { Link } from 'react-router-dom'
import { ArticleListState } from 'api/constant'
import { getArticles, delArticles } from 'api/channel'
import errorImage from 'assets/error.png'
import MyChannels from 'components/MyChannels'
// import 'moment/locale/zh-cn'
// import locale from 'antd/es/date-picker/locale/zh_CN'
const { RangePicker } = DatePicker
const { confirm } = Modal
export default class ArticleList extends Component {
  state = {
    dataSource: [],
    currentPage: 1,
    pageSize: 10,
    total: 0,
    isLoading: false,
  }
  columns = [
    {
      title: '封面',
      render(value) {
        const { type, images } = value.cover
        if (type === 0) {
          // 无图
          return (
            <Image
              width={200}
              height={150}
              src={errorImage}
              preview={false}
            ></Image>
          )
        } else {
          // 有图
          return (
            <Image
              width={200}
              height={150}
              src={images[0]}
              fallback={false}
            ></Image>
          )
        }
      },
    },
    {
      title: '标题',
      dataIndex: 'title',
      width: 300,
    },
    {
      title: '状态',
      render(value) {
        const itemObj = ArticleListState.find(
          (item) => item.id === value.status
        )
        return <Tag color={itemObj.color}>{itemObj.name}</Tag>
      },
    },
    {
      title: '发布时间',
      dataIndex: 'pubdate',
    },
    {
      title: '阅读数',
      dataIndex: 'read_count',
    },
    {
      title: '评论数',
      dataIndex: 'comment_count',
    },
    {
      title: '点赞数',
      dataIndex: 'like_count',
    },
    {
      title: '操作',
      render: (item) => {
        return (
          <>
            <Button
              type="primary"
              shape="circle"
              icon={<EditOutlined />}
              style={{ marginRight: 5 }}
              onClick={() => this.editClick(item.id)}
            />
            <Button
              type="primary"
              shape="circle"
              icon={<DeleteOutlined />}
              danger
              onClick={() => this.delClick(item.id)}
            />
          </>
        )
      },
    },
  ]

  params = {}

  render() {
    return (
      <div>
        {/* 筛选盒子 */}
        <Card
          title={
            <Breadcrumb>
              <Breadcrumb.Item>
                <Link to="/home">首页</Link>
              </Breadcrumb.Item>
              <Breadcrumb.Item>内容管理</Breadcrumb.Item>
            </Breadcrumb>
          }
        >
          <Form onFinish={this.onFinish} initialValues={{ status: undefined }}>
            <Form.Item label="状态" name="status">
              <Radio.Group>
                {ArticleListState.map((item, index) => (
                  <Radio key={index} value={item.id}>
                    {item.name}
                  </Radio>
                ))}
              </Radio.Group>
            </Form.Item>
            <Form.Item label="频道" name="channel_id">
              <MyChannels></MyChannels>
            </Form.Item>
            <Form.Item label="日期" name="date">
              <RangePicker />
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit">
                筛选
              </Button>
            </Form.Item>
          </Form>
        </Card>
        {/* 表格盒子 */}
        <Card title={`根据筛选条件共查询到 ${this.state.total} 条结果`}>
          <Table
            loading={this.state.isLoading}
            dataSource={this.state.dataSource}
            columns={this.columns}
            rowKey="id"
            pagination={{
              current: this.state.currentPage,
              pageSize: this.state.pageSize,
              total: this.state.total,
              onChange: this.onChange,
            }}
          />
        </Card>
      </div>
    )
  }
  componentDidMount() {
    this.getArticlesList()
  }

  // 分页
  onChange = (page, pageSize) => {
    this.setState(
      {
        currentPage: page,
        pageSize,
        dataSource: [],
      },
      () => {
        this.getArticlesList()
      }
    )
  }

  // 删除
  delClick = (id) => {
    console.log(id)
    confirm({
      title: '温馨提示',
      icon: <ExclamationCircleOutlined />,
      content: '亲, 您确定要删除该文章吗?',
      onOk: async () => {
        await delArticles(id)
        this.getArticlesList()
      },
    })
  }

  editClick = (id) => {
    this.props.history.push(`/home/publish/${id}`)
  }

  // 获取文章列表
  getArticlesList = async () => {
    this.setState({
      isLoading: true,
    })
    const { data } = await getArticles({
      page: this.state.currentPage,
      per_page: this.state.pageSize,
      ...this.params,
    })
    this.setState({
      isLoading: false,
      dataSource: data.results,
      currentPage: data.page,
      pageSize: data.per_page,
      total: data.total_count,
    })
  }

  // 筛选
  onFinish = (values) => {
    // 处理状态
    this.params.status = values.status
    // 处理频道
    this.params.channel_id = values.channel_id
    // 处理日期
    this.params.begin_pubdate =
      values.date && values.date[0].starOf('day').format('YYYY-MM-DD HH:mm:ss')
    this.params.end_pubdate =
      values.date && values.date[1].starOf('day').format('YYYY-MM-DD HH:mm:ss')
    this.getArticlesList()
  }
}
